/*
 * 新增灯光预设
 * @Author: LuoQianJun
 * @Date: 2018-03-31 17:53:51
 * @Last Modified by: ljb
 * @Last Modified time: 2019-07-02 15:10:53
 */
<style lang="less" rel="stylesheet/less" type="text/less">
    .v-admin-equipment-create {
		overflow-y: scroll;
		&::-webkit-scrollbar {
			display: none;
		}
        .equipment-form {
            width: 380px;
        }
        .ivu-radio-group {
            margin: 0 0 10px 4.16666667%;
		}
		.ivu-row-flex-start {
			height: 850px;
		}

    }
   .ivu-form-item{
	   margin-bottom:20px !important;
	 }
	  .product_thumb {
          width: 50px;
          vertical-align: middle;
        }
</style>
<template>
	<div class="v-admin-equipment-create">

		<Row

			type="flex"
			justify="start">
			<i-col push="1">
				<Form
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="labelWidth(120,170)"
					name="create-form">

					<Tabs
						v-model="language_id"

					>
						<TabPane
							v-for="(locale_suggest, locale_idx) in language_index"
							:key="`hm_tab_lang[${locale_idx}]`"
							:label="locale_suggest.name"

						>
							<!-- 设备名称 -->
							<Form-item
								v-show="locale_idx==1?false:true"
								:label="$t('lightingprese.name')"
								prop="device_zh_name">
								<i-input
									v-model="formValidate.device_zh_name"
									:placeholder="$t('lightingprese.please_enter_name')"
									name="`reate-device_zh_name${locale_idx}`"
									type="text"
									@on-keydown="change_en_language"/>
							</Form-item>

							<Form-item
								v-show="locale_idx==1?true:false"
								:label="$t('lightingprese.name')"
								prop="device_en_name"
							>
								<i-input
									v-model="formValidate.device_en_name"
									:placeholder="$t('lightingprese.please_enter_name')"
									name="`reate-device_zh_name${locale_idx}`"
									type="text"
									@on-keydown="change_zh_language"/>

						</form-item></TabPane>
					</tabs>


					<!-- 排序 -->
					<Form-item
						:label="$t('equipment.sort')"
						prop="sort_order">
						<InputNumber
							:min="1"

							v-model="formValidate.sort_order"
							:placeholder="$t('equipment.please_select_sort')"
							name="create-sort"/>
					</Form-item>

					<!-- 配置预设   设备 -->
					<Form-item
						:label="$t('home.device')"
						prop="producer">
						<Select
							v-model="formValidate.producer"
							clearable
							filterable
							style="width:200px"
							name="create-producer"
							@on-change="realIndex($event)"
						>
							<Option
								v-for="(item,index) in manufactures"
								:value="index"
								:key="item.id"

							>
								<span style="padding-right:20px">{{ item.name }}</span>
								<span style="padding-right:20px">{{ item.bluetooth_code }}</span>
								<span style="padding-right:20px">{{ item.price }}</span>

								<img
									:src="item.product_img"
									class="product_thumb"
									style="padding-right:20px"
								>
								<span style="padding-right:20px">{{ item.remark }}</span>
								<span style="padding-right:20px">{{ item.luminance_min }}</span>
								<span style="padding-right:20px">{{ item.luminance_max }}</span>
								<span style="padding-right:20px">{{ item.color_temperature_min }}</span>
								<span style="padding-right:20px">{{ item.color_temperature_max }}</span>
								<span style="padding-right:20px">{{ item.updated_at }}</span>
							</Option>
						</Select>
					</Form-item>


					<!-- 亮度 -->
					<!-- <Form-item
						v-show="manufactures[formValidate.producer]==undefined?false:true"
						:label="$t('lightingprese.luminance')"
						prop="luminance">
						<InputNumber
							:min="manufactures[formValidate.producer].luminance_min"
							v-model="formValidate.luminance"
							:placeholder="$t('lightingprese.please_enter_luminance')"
							name="create-sort"/>
					</Form-item> -->

					<Form-item

						:label="$t('lightingprese.luminance')"
						prop="luminance">
						<InputNumber
							:min="0"
							v-model="formValidate.luminance"
							:placeholder="$t('lightingprese.please_enter_luminance')"
							name="create-sort"/>
					</Form-item>

					<!-- 色温 -->
					<Form-item
						:label="$t('lightingprese.color_temperature')"
						prop="color_temperature">
						<InputNumber
							:min="0"

							v-model="formValidate.color_temperature"
							:placeholder="$t('lightingprese.please_enter_color_temperature')"
							name="create-temperature"/>
					</Form-item>


					<!-- logo -->
					<Form-item
						:label="$t('lightingprese.logo')"
						prop="producer_img">
						<Uploader
							ref="producer_img"
							@on-remove="(file)=>{handleRemove('producer_img',file)}"
							@on-change="(file)=>{handleChange('producer_img',file)}">
							{{ $t('common.pic_tip') }}
						</Uploader>
					</Form-item>
					<!-- 是否显示 -->
					<Form-item
						:label="$t('category.is_show')"
					>
						<RadioGroup
							v-model="formValidate.radio"

						>
							<Radio label="true">是</Radio>
							<Radio label="false">否</Radio>
						</RadioGroup>

					</Form-item>

					<Form-item>
						<Button
							type="primary"
							@click="handleSubmit('formValidate')">
							{{ $t('common.submit') }}
						</Button>
						<Button
							type="ghost"
							style="margin-left: 8px"
							@click="handleReset('formValidate')">
							{{ $t('common.reset') }}
						</Button>
					</Form-item>

				</tabs></tabpane></Form>
			</i-col>
		</Row>

	</div>
</template>

<script>

import labelWidthMixin from 'src/views/mixins/labelWidthMixin'; // 引入mixins文件
import { validateImage } from 'src/validate';
import Uploader from 'src/views/component/uploader';
import qs from 'qs';

export default {
	name: 'EquipmentCreate',

	components: {
		Uploader,
	},
	mixins: [labelWidthMixin],

	props: {
		skinDetectors: {
			type: Object,
			default() {
				return {};
			},
		},
		devices: {
			type: Array,
			default() {
				return [];
			},
		},
		deviceSpecs: {
			type: Array,
			default() {
				return [];
			},
		},
		manufactures: {
			type: Array,
			default() {
				return [];
			},
		},
		language_index: {
			type: Array,
			default() {
				return [];
			},
		},
	},

	data() {
		return {
			is_show: 1, // 1表示显示

			language_id: 0,
			formValidate: {

				device_zh_name: '', // 中文名称

				device_en_name: '', // 英文名称

				producer: '', // 配置预设

				sort_order: 1,

				color_temperature: 0,

				luminance: 0,

				luminance_min: '',

				luminance_max: '',

				color_temperature_min: '',

				color_temperature_max: '',

				remark: '',

				radio: 'true',

				producer_img: '',
			},


			ruleValidate: { // 验证表单数据规则
				code: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.code') }),
						trigger: 'blur,change',
					},
				],

				device_name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.device_name') }),
						trigger: 'blur,change',
					},
				],


				device_zh_name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.zh_cn_name') }),
						trigger: 'blur,change',
					},
				],


				device_en_name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.en_us_name') }),
						trigger: 'blur,change',
					},
				],
				sort_order: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('equipment.sort') }),
						trigger: 'blur,change',
					},
				],
				color_temperature: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('lightingprese.color_temperature') }),
						trigger: 'blur,change',
					},
				],
				luminance: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('lightingprese.luminance') }),
						trigger: 'blur,change',
					},
				],
				remark: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.remark') }),
						trigger: 'blur,change',
					},
				],

				producer: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('equipment.producer') }),
						trigger: 'blur,change',
					},
				],
				producer_img: [
					{ required: true, validator: validateImage, trigger: 'blur,change' },
				],

			},

		};
	},

	// watch: {

	// 	add_type() {
	// 		if (!this.add_type) return;

	// 		switch (this.add_type) {
	// 		case this.$t('equipment.new'): // 入库
	// 			this.handleReset('formValidate');
	// 			this.is_new_add = true;

	// 			break;
	// 		case this.$t('equipment.existing'): // 已有入库
	// 			this.handleReset('storeBuyValidate');
	// 			this.is_new_add = false;

	// 			break;
	// 		default:

	// 			break;
	// 		}
	// 	},

	// },

	// mounted() {
	// 	this.add_type = this.$t('equipment.new');
	// },

	methods: {
   	// 切换英文tabs
		change_en_language() {
			if (event.keyCode == 9) {
							 this.language_id = 1;
				 }
		},
		// 切换中文tabs
		change_zh_language() {
      	if (event.keyCode == 9) {
							 this.language_id = 0;
				 }
		},

		//  设备下拉框选择的下标
		 realIndex() {
			 

			 if (this.manufactures[this.formValidate.producer]!= undefined) {
				 		 this.formValidate.luminance_min = this.manufactures[this.formValidate.producer].luminance_min;

				this.formValidate.luminance_max = this.manufactures[this.formValidate.producer].luminance_max;

				this.formValidate.color_temperature_min = this.manufactures[this.formValidate.producer].color_temperature_min;

				this.formValidate.color_temperature_max = this.manufactures[this.formValidate.producer].color_temperature_max;
			 }
		 },

		/**
         * 时间选择器改变的回调
         * @param  {string} date {格式化后的时间}
         * @return {undefined}
         */
		// changeDate(date) {
		// 	this.real_date = date;
		// },

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {

			this.$refs[name].resetFields();

			this.$refs.producer_img.reset();

			this.is_show = 1;
			this.formValidate.radio = 'true';
		},


		/**
         * 提交表单
         * @param  {string} name {表单上的ref值}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.formDataCreate();
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 手动拼接表单数据
		 * @param {new_object} {拼接表单对象}
         * @return {undefined}
         */
		formDataCreate() {
			if (this.formValidate.radio == 'false') {
			   this.is_show = 0;
			 }
				  const new_array =	 [
				{
					id: 1,
					name: this.formValidate.device_zh_name,

				},
				{
					id: 3,
					name: this.formValidate.device_en_name,

				},

			 ];


			 const new_json = {
				 customize_json: this.manufactures[this.formValidate.producer].id,
			 };

			const new_object = {

				name: this.formValidate.device_zh_name,

				preset: JSON.stringify(new_json),

				device_id: 1,

				sort_order: this.formValidate.sort_order,

				is_show: this.is_show,

				luminance_min: this.formValidate.luminance_min,

				luminance_max: this.formValidate.luminance_max,

				color_temperature_min: this.formValidate.color_temperature_min,

				color_temperature_max: this.formValidate.color_temperature_max,


				color_temperature: this.formValidate.color_temperature,

				luminance: this.formValidate.luminance,

				logo: this.formValidate.producer_img,

				producer: this.formValidate.producer,

			};

			if (this.formValidate.luminance <= new_object.luminance_max && this.formValidate.luminance >= new_object.luminance_min) {
				new_object.luminance = this.formValidate.luminance;
			} else {
				alert('请输入正确的亮度范围！！');
				return;
			}

			if (this.formValidate.color_temperature <= new_object.color_temperature_max && this.formValidate.color_temperature >= new_object.color_temperature_min) {
				new_object.color_temperature = this.formValidate.color_temperature;
			} else {
				alert('请输入正确的色温范围！！');
				return;
			}

			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				form_data.append(key, new_object[key]);
			});

			// dexcriptions需为数组
			for (let i = 0; i < new_array.length; i++) {
				for (const key in new_array[i]) {
					form_data.append(`descriptions[${new_array[i].id}][${key}]`, new_array[i][key]);
				}
			}


			this.$emit('postStore', form_data);
		},

		// 選擇圖片
		handleChange(field, { file }) {
			console.log(field, file);

			this.formValidate[field] = file;
			this.$refs.formValidate.validateField(field);
		},
		/**
		 * 删除图片
		 * @param {String} field {icon}
		 * @return {undefined}
		 */
		handleRemove(field) {
			this.formValidate[field] = null;
			this.$refs.formValidate.validateField(field);
		},

	},
};
</script>
